<!--
// Copyright © 2025 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->

<script lang="ts">
  import { PersonPreviewProvider, Avatar } from '@hcengineering/contact-resources'
  import { formatName, Person } from '@hcengineering/contact'
  import { Message } from '@hcengineering/communication-types'
  import { Card } from '@hcengineering/card'
  import { Label } from '@hcengineering/ui'

  import communication from '../../plugin'
  import MessageInput from '../input/MessageInput.svelte'
  import MessageContentViewer from './MessageContentViewer.svelte'
  import MessageFooter from './MessageFooter.svelte'
  import {
    translateMessagesStore,
    messageEditingStore,
    TranslateMessagesStatus,
    showOriginalMessagesStore,
    isMessageTranslated,
    translateToStore,
    dontTranslateStore,
    isMessageOriginalShown
  } from '../../stores'
  import { showOriginalMessage, translateMessage } from '../../actions'

  export let card: Card
  export let author: Person | undefined
  export let message: Message
  export let isEditing = false
  export let compact: boolean = false
  export let hideAvatar: boolean = false
  export let hideHeader: boolean = false
  export let showThreads: boolean = true
  export let collapsible: boolean = true
  export let maxHeight: string = '30rem'

  let isShowMoreActive: boolean = false

  function formatDate (date: Date): string {
    return date.toLocaleTimeString('default', {
      hour: 'numeric',
      minute: 'numeric'
    })
  }

  let isManualTranslating = false
  let manualTranslateStatus: TranslateMessagesStatus | undefined = undefined
  let isTranslated = false

  $: manualTranslateStatus = $translateMessagesStore.find((it) => it.cardId === card._id && it.messageId === message.id)
  $: isManualTranslating = manualTranslateStatus?.inProgress === true
  $: isTranslated = isMessageTranslated(
    message,
    $translateToStore,
    $dontTranslateStore,
    $translateMessagesStore,
    $showOriginalMessagesStore
  )
  $: isOriginalShown = isMessageOriginalShown(
    message,
    $translateToStore,
    $dontTranslateStore,
    $translateMessagesStore,
    $showOriginalMessagesStore
  )
</script>

{#if compact || hideHeader}
  <div class="message__body">
    {#if !hideHeader}
      <div class="time-container">
        <div class="message__time message--time_hoverable">
          <div class="message__date">
            {formatDate(message.created)}
          </div>
        </div>
      </div>
    {/if}

    <div class="message__content">
      {#if !isEditing && message.content !== ''}
        <div class="message__text" class:with-showmore={isShowMoreActive}>
          <MessageContentViewer {message} {card} {author} {collapsible} {maxHeight} bind:isShowMoreActive />
        </div>
      {:else if isEditing}
        <MessageInput
          {card}
          {message}
          onCancel={() => {
            messageEditingStore.set(undefined)
          }}
          on:edited={() => {
            messageEditingStore.set(undefined)
          }}
        />
      {/if}
      {#if !isEditing}
        <MessageFooter {message} {showThreads} />
      {/if}
    </div>
  </div>
{:else}
  <div class="message__body">
    {#if !hideAvatar}
      <div class="message__avatar">
        <PersonPreviewProvider value={author}>
          <Avatar name={author?.name} person={author} size="medium" />
        </PersonPreviewProvider>
      </div>
    {/if}
    <div class="message__content">
      <div class="message__header">
        <PersonPreviewProvider value={author}>
          <div class="message__username">
            {formatName(author?.name ?? '')}
          </div>
        </PersonPreviewProvider>
        <div class="message__date">
          {formatDate(message.created)}
        </div>
        {#if message.modified}
          <div class="message__edited-marker">
            (<Label label={communication.string.Edited} />)
          </div>
        {/if}
        {#if isManualTranslating}
          <div class="message__translating">
            <Label label={communication.string.Translating} />
          </div>
        {:else if isTranslated}
          <div class="message__show-original" on:click={() => showOriginalMessage(message, card)}>
            <Label label={communication.string.ShowOriginal} />
          </div>
        {:else if isOriginalShown}
          <div class="message__translate" on:click={() => translateMessage(message, card)}>
            <Label label={communication.string.Translate} />
          </div>
        {/if}
      </div>
      {#if !isEditing}
        <div class="message__text" class:with-showmore={isShowMoreActive}>
          <MessageContentViewer {message} {card} {author} {collapsible} {maxHeight} bind:isShowMoreActive />
        </div>
      {:else if isEditing}
        <MessageInput
          {card}
          {message}
          onCancel={() => {
            messageEditingStore.set(undefined)
          }}
          on:edited={() => {
            messageEditingStore.set(undefined)
          }}
        />
      {/if}
      {#if !isEditing}
        <MessageFooter {message} {showThreads} />
      {/if}
    </div>
  </div>
{/if}

<style lang="scss">
  .message__body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    min-width: 0;
    position: relative;
    //overflow: hidden;
  }

  .message__avatar {
    display: flex;
    width: 2.5rem;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }

  .message__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    flex: 1 0 0;
    min-width: 0;
    max-width: 100%;
  }

  .message__header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .message__username {
    color: var(--global-primary-TextColor);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .message__date {
    color: var(--global-tertiary-TextColor);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
  }

  .message__edited-marker {
    text-transform: lowercase;
    color: var(--global-tertiary-TextColor);
    font-size: 0.75rem;
    font-weight: 400;
  }

  .message__translating {
    color: var(--global-tertiary-TextColor);
    font-size: 0.75rem;
    font-weight: 400;
  }

  .message__show-original,
  .message__translate {
    font-size: 0.75rem;
    color: var(--global-tertiary-TextColor);
    cursor: pointer;

    &:hover {
      color: var(--global-secondary-TextColor);
    }
  }

  .message__text {
    color: var(--global-primary-TextColor);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    user-select: text;
    flex: 1;

    &.with-showmore {
      position: relative; // This ensures ShowMore button positions relative to this container
      margin-bottom: 1rem;
      overflow: visible;
    }
  }

  .time-container {
    position: relative;
    width: 2.5rem;
  }

  .message__time {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1.313rem;
    right: 0;
    visibility: hidden;
  }
</style>
